<header>
    <nav class="bg-white dark:bg-gray-800 shadow-lg fixed w-full z-50 transition-colors duration-200">
        <div class="max-w-7xl mx-auto px-4">
            <div class="flex justify-between items-center h-16">
                <!-- Logo -->
                <div class="flex-shrink-0 flex items-center space-x-2">
                    <img src="{{ url_for('static', filename='images/logo.png') }}" 
                         alt="Sprunki Logo" 
                         class="w-8 h-8 md:w-10 md:h-10">
                    <a href="{{ url_for('main.index', lang='en') }}" class="text-2xl font-bold text-primary">
                        {{ _('Sprunki Phase 3') }}
                    </a>
                </div>

                <!-- Desktop Navigation -->
                <div class="hidden md:flex items-center space-x-4">
                    <a href="{{ url_for('main.about') }}" class="text-gray-600 hover:text-primary dark:text-gray-300 dark:hover:text-primary px-3 py-2">
                        {{ _('About') }}
                    </a>
                    <a href="{{ url_for('main.blog') }}" class="text-gray-600 hover:text-primary dark:text-gray-300 dark:hover:text-primary px-3 py-2">
                        {{ _('Blog') }}
                    </a>
                    <a href="{{ url_for('main.contact') }}" class="text-gray-600 hover:text-primary dark:text-gray-300 dark:hover:text-primary px-3 py-2">
                        {{ _('Contact') }}
                    </a>
                    
                    <!-- Language Switcher -->
                    <div class="relative">
                        <button id="language-switcher" class="flex items-center space-x-2 px-3 py-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
                            <span class="flag-icon flag-icon-{{ g.current_flag }}"></span>
                            <span class="hidden sm:inline">{{ g.languages[g.current_language] }}</span>
                            <i class="fas fa-chevron-down text-sm"></i>
                        </button>
                        <div id="language-dropdown" class="hidden absolute right-0 mt-2 py-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-xl">
                            {% for code, name in g.languages.items() %}
                            <a href="{{ url_for('main.index', lang=code) }}" 
                               class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700">
                                <span class="flag-icon flag-icon-{{ LANGUAGE_MAP[code]['flag'] }} mr-2"></span>
                                <span>{{ name }}</span>
                            </a>
                            {% endfor %}
                        </div>
                    </div>

                    <!-- Theme Toggle -->
                    <button id="theme-toggle" class="p-2 rounded-lg text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700">
                        <i class="fas fa-sun" id="theme-toggle-light-icon"></i>
                        <i class="fas fa-moon hidden" id="theme-toggle-dark-icon"></i>
                    </button>
                </div>

                <!-- Mobile Menu Button -->
                <div class="md:hidden flex items-center">
                    <button id="mobile-menu-button" class="text-gray-600 hover:text-primary dark:text-gray-300">
                        <i class="fas fa-bars text-2xl"></i>
                    </button>
                </div>
            </div>

            <!-- Mobile Menu -->
            <div id="mobile-menu" class="hidden md:hidden pb-4">
                <div class="flex flex-col space-y-2">
                    <a href="{{ url_for('main.about') }}" class="text-gray-600 hover:text-primary dark:text-gray-300 px-3 py-2">
                        {{ _('About') }}
                    </a>
                    <a href="{{ url_for('main.blog') }}" class="text-gray-600 hover:text-primary dark:text-gray-300 px-3 py-2">
                        {{ _('Blog') }}
                    </a>
                    <a href="{{ url_for('main.contact') }}" class="text-gray-600 hover:text-primary dark:text-gray-300 px-3 py-2">
                        {{ _('Contact') }}
                    </a>
                </div>
            </div>
        </div>
    </nav>
</header> 